<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style id="css">
			*{
				padding:0;
				margin:0;
				list-style: none;
			}
			#box{
				width:200px;
				height:200px;
				margin:50px auto;
				border:1px solid black;
				border-radius: 50%;
				position:relative;
				background:radial-gradient(Red, orange, yellow, green, blue, purple);
			}
			#box ul{
				width:200px;
				height:200px;
				border-radius: 50%;
				
			}
			#box ul li{
				height:10px;
				width:2px;
				background:black;
				position:absolute;
				top:0px;
				left:99px;
				transform-origin: center 100px;
			}
			#box ul li:nth-of-type(5n+1){
				height:15px;
			}
			#box .hour{
				height:50px;
				width:6px;
				position:absolute;
				top:50px;
				left:97px;
				background:radial-gradient(Red, orange, yellow, green, blue, purple);
				transform-origin: center bottom;
			}
			#box .min{
				height:60px;
				width:4px;
				position:absolute;
				top:40px;
				left:98px;
				background:radial-gradient(Red, orange, yellow, green, blue, purple);
				transform-origin: center bottom;
			}
			#box .sec{
				height:80px;
				width:2px;
				position:absolute;
				top:20px;
				left:99px;
				background: red;
				transform-origin: center bottom;
			}
			#box .cover{
				width:20px;
				height:20px;
				background:radial-gradient(Red, orange, yellow, green, blue, purple);
				position:absolute;
				top:90px;
				left:90px;
				border-radius: 50%;
			}
			
		</style>
		<script>
			window.onload = function(){
//				获得style标签对象
				var oCss = document.getElementById('css');
//				获得表盘
				var oUl = document.getElementById('box').children[0];
//				声明一个空字符串用来装 生成的css样式
				var str = '';
//				装60个通过js生成的li
				var li = '';
				
				for(var i=0;i<60;i++){
					li += '<li></li>';
//					计算每一个li的角度 拼接成css样式
					str += '#box ul li:nth-of-type('+(i+1)+'){transform: rotate('+6*i+'deg);}';
				}
//				将拼接好的css样式,写入style标签
				oCss.innerHTML += str;
//				将li写入ul中,形成刻度
				oUl.innerHTML = li;
//				获得时针
				var oHour = document.getElementById("hour");
//				获得分针
				var oMin = document.getElementById("min");
//				获得秒针
				var oSec = document.getElementById("sec");
				console.log(oSec,oMin,oHour);
				getTime();
				timer = setInterval(getTime,1000);
				function getTime(){
//					获得当前时间
					var nowTime = new Date();
//					获得当前秒数
					var sec = nowTime.getSeconds();
//					获得当前分数
					var min = nowTime.getMinutes()+sec/60;
//					获得当前小时数
					var hour = nowTime.getHours()+min/60;
					
					
//					将时分秒对应的旋转角度,写入行内样式
					oSec.style.transform = 'rotate('+6*sec+'deg)';
					oMin.style.transform = 'rotate('+6*min+'deg)';
					oHour.style.transform = 'rotate('+30*hour+'deg)';
				}
			}
		</script>
	</head>
	<body>
		<div id="box">
			<ul>
				
			</ul>
			<div id="hour" class="hour"></div>
			<div id="min" class="min"></div>
			<div id="sec" class="sec"></div>
			<div  class="cover"></div>
		</div>
	</body>
</html>
